<template>
  <header>
    <div class="header-main">
      <div class="header-l">
        <h1 class="logo">
          <img src="@/assets/image/logo.png" alt="logo" />
        </h1>
        <ul>
          <li class="active">首页</li>
          <li>课程</li>
          <li>会员</li>
        </ul>
      </div>
      <div class="header-r">
        <div class="search">
          <input type="text" placeholder="搜索想要的课程" />
          <el-icon color="#999" :size="20"><Search /></el-icon>
        </div>
        <div class="shop">
          <el-icon :size="20"><ShoppingCart /></el-icon>
        </div>
        <div class="login">登录/注册</div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { Search, ShoppingCart } from "@element-plus/icons-vue";
</script>

<style scoped>
header {
  width: 100%;
  height: 80px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
  position: relative;
  z-index: 99;
}
.header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1000px;
  height: 80px;
  margin: 0 auto;
}
.header-l {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  width: 127px;
  height: 50px;
  margin-right: 51px;
}
.logo img {
  width: 100%;
  height: 100%;
}
.header-l ul {
  display: flex;
  height: 50px;
  font-size: 16px;
  color: #808080;
}
.header-l ul li {
  line-height: 50px;
  font-weight: 500;
  cursor: pointer;
}
.header-l ul li + li {
  margin-left: 79px;
}
.active {
  position: relative;
  color: #3585ff;
}
.active:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: -20%;
  width: 140%;
  height: 3px;
  background: #3585ff;
}
.header-r {
  display: flex;
  align-items: center;
}
.header-r .search {
  display: flex;
  align-items: center;
  padding: 0 10px;
  width: 300px;
  height: 43px;
  background: #f0f2f4;
  border-radius: 5px;
}
.header-r .search input {
  width: 270px;
  height: 43px;
  border: none;
  background: transparent;
  outline: none;
}
.header-r .shop {
  display: flex;
  align-items: center;
  margin-left: 42px;
}
.header-r .login {
  margin-left: 39px;
  font-size: 16px;
  font-family: "Microsoft YaHei";
  columns: #808080;
  cursor: pointer;
}
</style>
